<template>
    <div class="card">
        <div class="title">{{ title }}</div>
        <div class="grid_box">
            <div class="grid_item" v-for="item in list" :key="item.title">
                <div class="item_num">
                    <span :style="item.styles" @click="onClick(item.url)">
                        <span v-if="item.rmb" class="rmb">¥</span>{{ item.num }}
                    </span>
                </div>
                <div class="item_title">{{ item.title }}</div>
                <div class="item_desc">{{ item.desc }}</div>
            </div>
        </div>
    </div>
</template>

<script setup name="card">
import { computed } from 'vue';

const props = defineProps({
    data: { type: Object, default: () => ({ title: '', list: [] }) }
});
const title = computed(() => props.data.title);
const list = computed(() => props.data.list);
const onClick = url => {
    if (!url) return;
    window.open(url);
};
</script>

<style lang="scss" scoped>
.card {
    margin-top: 16px;
    background-color: #fff;
    .title {
        display: flex;
        align-items: center;
        padding: 24px 16px 0;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #33302d;
        &::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 16px;
            margin-right: 4px;
            background: #ff6b00;
        }
    }
    .grid_box {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 30px;
        padding: 30px 24px 24px;
        .grid_item {
            .item_num {
                height: 36px;
                margin-bottom: 12px;
                font-size: 36px;
                line-height: 36px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #33302d;
                .rmb {
                    font-size: 20px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #33302d;
                }
            }
            .item_title {
                margin-bottom: 8px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #33302d;
                line-height: 16px;
            }
            .item_desc {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #969696;
                line-height: 16px;
            }
        }
    }
}
</style>
